<template>
  <div class="kehu">
    <div class="kehu-table-head">
      <my-select :items="levelItems" ph="客户等级"></my-select>
      <my-select :items="sourceItems" ph="全部来源"></my-select>
      <my-date width="300"></my-date>
      <my-search ph="请输入关键词搜索" width="276"></my-search>
      <my-button :color="true">添加客户</my-button>
      <my-button :color="true">批量操作</my-button>
      <my-button>导出数据</my-button>
    </div>
    <div class="kehu-table-base-table">
      <base-table
        :mydata="customerList"
        :mytitle="customerTitle"
        type="kh"
        checkbox="true"
      ></base-table>
      <div class="pages">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, prev, pager, next, sizes, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTable from "@/components/MyTable/BaseTable";
import MyDate from "@/components/MyInput/MyDate";
import MySelect from "@/components/MyInput/MySelect";
import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
export default {
  components: {
    BaseTable,
    MyDate,
    MySelect,
    MySearch,
    MyButton,
  },
  created() {
    this.$axios.get("/customer").then((res) => {
      this.customerList = res.data.customerList;
    });
  },
  mounted () {
    this.$store.commit('setTitle','客户')
    this.$store.commit('NavStyleClear','客户')
  },
  data() {
    return {
      customerList: [],
      customerTitle: [
        {
          name: "客户名称",
          prop: "name",
          width: 180,
        },
        {
          name: "真实姓名",
          prop: "realName",
          width: 180,
        },
        {
          name: "电话",
          prop: "telephone",
          width: 180,
        },
        {
          name: "邮箱",
          prop: "email",
          width: 180,
        },
        {
          name: "客户等级",
          prop: "level",
          width: 180,
        },
        {
          name: "客户来源",
          prop: "origin",
          width: 180,
        },
      ],
      sourceItems: [
        {
          label: "全部终端",
          value: 0,
        },
        {
          label: "Mac",
          value: 1,
        },
        {
          label: "Windows",
          value: 2,
        },

        {
          label: "手机",
          value: 3,
        },
      ],
      levelItems: [
        {
          label: "全部等级",
          value: 0,
        },
        {
          label: "普通客户",
          value: 1,
        },
        {
          label: "VIP客户",
          value: 2,
        },

        {
          label: "潜在客户",
          value: 3,
        },
      ],
      date: 0,
      sourceValue: "",
      levelValue: "",
      search: "",
    };
  },
};
</script>

<style>
.kehu {
  background-color: #ffffff;
  height: 108%;
  padding: 10px 20px;
}

.kehu-table-head{
  display: flex;
  margin: 10px 0 20px;
  justify-content: space-around;
}

.kehu-table-head .el-select {
  width: 160px;
}

</style>